<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 

  <title>详情页面</title>
    <!-- 引入bootstrap样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="css/bootstrap-table.min.css" rel="stylesheet">

    <!-- jquery -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- bootstrap-table.min.js -->
    <script src="js/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="js/bootstrap-table-zh-CN.min.js"></script>

  
    <script src="js/moment-with-locales.min.js"></script>
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="js/bootstrap-datetimepicker.min.js"></script>


<script src="city.js"></script>  
<style type="text/css">
    header{
      height: 65px;
      background: rgba(247,235,175,1);
    }
    header span{
      line-height: 65px;
      font-size:22px;
      font-weight: bolder;
      float: left;
      margin-left: 50px;
    }
    header #login{

      display: inline-block;
      float: right;
      margin-right: 150px;
      margin-top: 15px;
    }
    body { 
    height: 670px;
    background-color: rgba(232,172,43,0.5);
    background-size: 100% 100%;
    text-align: center;
  }
  input,select, textarea,.input-group{
    height: 25px;
      border: 0;
      border-radius: 3px;
      margin-bottom: 15px;
  }
  .publishHotel{
    margin-left: 200px;
    margin-top: 30px;
    width: 900px;
    /*height: 500px;*/
    /* background: rgba(255,255,203,0.8); */
  }
  .data-common{
    display: inline-block;
    width: 400px;
    /* margin-top: 20px; */
  }
  .common-span{
    display: inline-block;
    width: 100px;
    text-align: right;
  }
  .common-input{
    width: 200px;
    display: inline-block;
  }
    .common-label{
    width: 1000px;
    display: inline-block;
  }
  .sideBar{
    width: 200px;
    height: 550px;
    /* display: inline-block; */
    float: left;
    background: rgba(255,255,208,0.8);
    border-right:1px solid rgba(255,255,208,1);
  }
  .data-common1{
    width: 800px;
  }
  .common-textarea{
    vertical-align: text-top;
    width: 505px;
    display: inline-block;
  }

  </style>
</head>
<body>
  <header>
    <span align="left">分享式民宿酒店预订系统——房间详情</span>
  </header>

<div class="jumbotron" style="background-color: rgba(194,205,37,0.5);">
  <h1>居住自由主义</h1>
  <p>别住酒店，来住我家~~~</p>  
</div>

  <div class="publishHotel">
    <div>
    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-star" aria-hidden="true"></span>&nbsp;&nbsp;价格(每晚):
    	</label>
    	<label class="common-label" type="text" id="price">300元</label>
    	</div>

    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;&nbsp;房源类型:
    	</label>
    	<label class="common-label" type="text" id="housingType">酒店公寓</label>
    	</div>
    </div>

    <div>
    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>&nbsp;&nbsp;所属省份:
    	</label>
    	<label class="common-label" type="text" id="province">陕西省</label>
    	</div>

    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-send" aria-hidden="true"></span>&nbsp;&nbsp;所属城市:
    	</label>
    	<label class="common-label" type="text" id="city">西安市</label>
    	</div>
    </div>

    <div>
    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-send" aria-hidden="true"></span>&nbsp;&nbsp;房间类型:</label>
    	<label class="common-label" type="text" id="city">两室一厅</label>
    	</div>

    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-grain" aria-hidden="true"></span>&nbsp;&nbsp;可住人数:</label>
    	<label class="common-label" type="text" id="canLiveNumber">4</label>
    	</div>
    </div>  
    <div>
     <div>
    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-import" aria-hidden="true"></span>&nbsp;&nbsp;可入住时间:</label>
    	<label class="common-label" type="text" id="availableTime">2018-04-10</label>
    	</div>


        <div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-export" aria-hidden="true"></span>&nbsp;&nbsp;房间使用截止时间:</label>
    	<label class="common-label" type="text" id="endTime">2018-04-30</label>
    	</div>
     </div>        
    </div>

    <div>
    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;&nbsp;房屋介绍:</label>
    	<label class="common-label" type="text" id="roomDescribe">房屋介绍</label>
    	</div>
    </div>
    <div>
    	<div class="data-common">
    	<label class="common-label">
    	<span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span>&nbsp;&nbsp;入住须知:</label>
    	<label class="common-label" type="text" id="roomNotice">入住须知</label>
    	</div>
    </div>

   <div>
         <button class="btn btn-success btn-xm" type="button" id="return">返回</button>
   </div>

 </div>
  </div>
</div>
  </div>
  <script>  
    (function(){
      var str = location.search;
      var housingKeyId =str.substring(1,str.length).split("=")[1];
      $.get("/housing/findOne",{housingKeyId: housingKeyId},function(data){
        var data = data.data
        $("#price").html(data.price)

        $("#availableTime").html(data.availableStartTime.replace(/T.+/,""))
        $("#endTime").html(data.availableEndTime.replace(/T.+/,""))
        console.log(data)
      })
      $("#return").click(function(){
        window.history.back()
      })
	})();
     </script>
</body>
</html>